<template>
    <div class="panel-content" ref="panelContent">
      <!-- Tab 标题 -->
     
      <div class="tab-header">
        <div
          v-for="(tab, index) in tabsByActiveTabs"
          :key="index"
          :class="['tab-item', { active: activeTab === index }]"
          @click="switchTab(index)">
          {{ tab.title }}
        </div>
       
      </div>
      <!-- Tab 内容 -->
      <div class="tab-content"> 
        <div v-for="(tab, index) in tabsByActiveTabs" :key="index" v-show="activeTab === index">
          <component :is="tab.component">
            <template #right-panel>
                <slot name="right-panel"></slot>
            </template>
          </component>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue, Prop, Ref} from 'vue-property-decorator';
  
  // 示例组件，用于演示 tab 内容
  import TabPanelExternal from '@/components/Map/TabPanelExternel.vue';
  import TabPanelFeature from '@/components/Map/TabPanelFeature.vue';
  import ChatWindow from '@/components/Chat/ChatWindow.vue';


  @Component({
    methods: {},
    components: { TabPanelExternal, TabPanelFeature, ChatWindow }
})
  export default class PanelContent extends Vue {

    @Prop({default:() =>
       ["分析面板","要素面板","智能搜索面板"]
    }) activeTabs!:string[];
    // 当前激活的 tab 索引
    private activeTab:any = 0;

    @Ref('panelContent') private panelContent!: any;
    // Tab 配置
    private tabs:any = [
      {
        title: '分析面板',
        component: TabPanelExternal,
      },
      {
        title: '要素面板',
        component: TabPanelFeature,
      },
      {
        title: '智能搜索面板',
        component: ChatWindow,
      }
    ];

    private  get tabsByActiveTabs(){ 
      if (this.activeTabs.length === 0) {
        return []; // 或返回默认标签
      }
      return this.tabs.filter((tab:any)=>{
        return this.activeTabs.includes(tab.title);
      })
    }
  
    // 切换 tab
    public switchTab(index: number) {
      this.activeTab = index;

    }

    public switchTabByTitle(title:string){
      this.tabs.forEach((tab,index)=>{
        if(tab.title === title){
          this.activeTab = index;
        }
      })
    }
   mounted(){

     
   (this as any).$bus.$on('panel-switch',idx =>{
        this.$nextTick(() => {
           this.switchTab(idx);
   });
     
   });
  }
}
  </script>
  
  <style scoped>
  .panel-content {
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 12px;
    flex-direction: column;
    padding: 0px!important;
  }
  
  .tab-header {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    
  }
  
  .tab-item {
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .tab-item.active {
    color: #409eff;
    border-bottom: 2px solid #409eff;
    font-weight: bold;
  }
  
  .tab-content {
    flex: 1;
    padding: 0px !important;
  }
  </style>